<html xmlns:saxon="http://icl.com/saxon">
   <head>
      <link rel="stylesheet" type="text/css" href="doc.css"/>
      <link rel="stylesheet" type="text/css" href=""/>
      <meta author="The MathWorks Ltd."/>
      <meta copyright="2011 The MathWorks Ltd."/>
      <title>Sizes and units</title>
   </head>

   
    <body>
      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td bgcolor="#e4f0f8"><A href="User guide.html"><font face="Arial" bgcolor="#e4f0f8" size="+0" underline="0" color="#000000"><b>User guide</b></font></A></td>
            <td width="36" bgcolor="#e4f0f8"><A HREF="User guide1_2.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide1_4.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
         </tr>
      </table>
   

      <br clear="all"/>
          
      <h2>1.3: Sizes and units&nbsp;<a href="User guide1.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
      
                <p>In the previous section we noted that when using layouts
                    you never need to set the position or size of a user-interface
                    component yourself - the layouts take care of it. So how do
                you control the sizes of the components?</p>
                <p>Each layout that arranges multiple items within its drawing area
                    has a sizing property: for horizontal and vertical boxes this
                    is called <code>Sizes</code>; for grids we have <code>RowSizes</code>
                and <code>ColumnSizes</code>. These all obey the same convention:</p>
                <ol>
                    <li>Positive numbers indicate sizes in pixels (similar to "pixel" units)</li>
                    <li>Negative numbers indicate a weighting for variable sizing (similar to "normalized" units)</li>
                </ol>
                <p>By default all sizes are set to -1 (variable size with unit weighting).</p>
                <p>Let's take a simple example:</p>
                <example>
                <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">f = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>();
layout = <a href="uiextras.HBox.html"><code class="FUNCTION">uiextras.HBox</code></a>( 'Parent', f );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 1', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 2', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 3', 'Parent', layout );</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example4.png"/></center></font></p>
</example>
                <p>We can set the middle element to be twice as wide as the others
            (but still variable width) by setting its weight to -2 with the others at -1:</p>
                <example>
                    <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">layout.Sizes = [-1 -2 -1]</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example5.png"/></center></font></p>
</example>
                <p>Alternatively we might want the first element to have a 
                fixed width of 100 pixels with the others filling any remaining 
                space equally:</p>
                <example>
                <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">layout.Sizes = [100 -1 -1]</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example6.png"/></center></font></p>
</example>

                <p>This ability to mix fixed and variable sized elements is
            crucial in interface design. It really comes into its own when building
        a heirarchy of layouts, described next.</p>
                
            
        
            <br clear="all"/><hr/><h3 class="hbg"><a name="">&nbsp;</a><a name="1.3.1">
                        &nbsp;</a>1.3.1: 
                        Minimum sizes&nbsp;<a href="#Top"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h3>
                <p>Many of the multi-element layouts also provide a <code>MinimumSizes</code>
                    property to prevent an element becoming too small. This is measured in
                    pixels and defaults to one pixel. If the specified minimum sizes cannot fit
                within the available space then all element sizes are reduced to fit.</p>
            
      
      <br clear="ALL"/>
      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_2.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Types of layout</font></a></td>
            <td width="20%" height="15" bgcolor="#e4f0f8" align="center"><a href="index.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">[Top]</font></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_4.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Layout heirarchies</font></a></td>
            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_4.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
         </tr>
      </table>
      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
   
   </body>
</html>
        
